<script lang="ts" setup>
import { ref, watch } from "vue";
import category from "./components/category.vue";
import searchTable from "./components/searchTable.vue";

const props = defineProps({
  selections: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(["submit"]);
const dialogVisible = ref(false);
const materialCateId = ref(null);
const searchTableRef = ref(null);

watch(dialogVisible, () => {
  if (props.selections && props.selections.length) {
    searchTableRef.value?.setSelections(props.selections);
  }
});

const handleSave = () => {
  emits("submit", searchTableRef.value.getSelections());
  dialogVisible.value = false;
};

const handleCancel = () => {
  dialogVisible.value = false;
};

defineExpose({
  open: () => {
    materialCateId.value = null;
    dialogVisible.value = true;
  }
});
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    class="addMaterial"
    title="选择物料"
    width="1116"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="flex flex-row pl-[32px] pr-[32px] pt-[24px]">
      <category v-if="dialogVisible" v-model:materialCateId="materialCateId" />
      <div class="h-[100%] w-[1px] bg-[#EEEEEE] mr-[16px] ml-[16px]"></div>
      <searchTable
        v-if="dialogVisible"
        ref="searchTableRef"
        :materialCateId="materialCateId"
      />
    </div>
    <template #footer>
      <div class="flex flex-row justify-end pt-[24px] pr-[16px] pl-[16px]">
        <el-button type="primary" @click="handleSave">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
